<template>
    <div class="xmt-system-config-index">
        <Form ref="ConfigFrom" label-position="righ" label-width="80" inline>
            <Card>
                <span slot="title">{{ config.ladder_price.description }}</span>
                <div slot="extra">
                    <Button type="success" size="small" icon="save" @click="handleSubmit">保存</Button>
                    <Button type="success" size="small" icon="loop" @click="getData()">刷新</Button>
                </div>
                <Row class="ladder-price-card">
                    <Col span="12">
                        <FormItem label="1级定价：">
                            <Input readonly type="number" :number="true" maxlength="5" v-model="config.ladder_price.value.one.min">
                                <span slot="append">到</span>
                            </Input>
                            <Input type="number" @on-change="config.ladder_price.value.two.min=config.ladder_price.value.one.max" :number="true" maxlength="5" v-model="config.ladder_price.value.one.max">
                                <span slot="append">分钟</span>
                            </Input>
                            <Input type="number" :number="true" maxlength="5" v-model="config.ladder_price.value.one.price">
                                <span slot="append" style="color:red;">元</span>
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="2级定价：">
                            <Input readonly type="number" :number="true" maxlength="5" v-model="config.ladder_price.value.two.min">
                                <span slot="append">到</span>
                            </Input>
                            <Input type="number" @on-change="config.ladder_price.value.three.min=config.ladder_price.value.two.max" :number="true" maxlength="5" v-model="config.ladder_price.value.two.max">
                                <span slot="append">分钟</span>
                            </Input>
                            <Input type="number" :number="true" maxlength="5" v-model="config.ladder_price.value.two.price">
                                <span slot="append" style="color:red;">元</span>
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="3级定价：">
                            <Input readonly type="number" :number="true" maxlength="5" v-model="config.ladder_price.value.three.min">
                                <span slot="append">到</span>
                            </Input>
                            <Input type="number" @on-change="config.ladder_price.value.four.min=config.ladder_price.value.three.max" :number="true" maxlength="5" v-model="config.ladder_price.value.three.max">
                                <span slot="append">分钟</span>
                            </Input>
                            <Input type="number" :number="true" maxlength="5" v-model="config.ladder_price.value.three.price">
                                <span slot="append" style="color:red;">元</span>
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="12" class="four-ladder-price">
                        <FormItem label="4级定价：">
                            <Input type="number" :number="true" maxlength="5" v-model="config.ladder_price.value.four.price">
                                <span slot="prepend">{{ config.ladder_price.value.four.min }}分钟后</span>
                                <span slot="append" style="color:red;">元</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <FormItem label="是否开启积分支付功能：" label-width="160">
                            <i-switch size="large" v-model="config.ladder_score.value.status" maxlength="5" true-value="true" false-value="false">
                                <span slot="open">开启</span>
                                <span slot="close">关闭</span>
                            </i-switch>
                        </FormItem>
                        <FormItem  label="积分兑换比例:" label-width="138">
                            <Input style="text-align: center;" ref="one_money_to_score" align="center"  placeholder="请输入兑换积分数量" type="number" maxlength="5" :number="true" v-model="config.ladder_score.value.one_money_to_score" >
                                <span slot="prepend">1元可兑换</span>
                                <span slot="append">积分</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col>
                    <FormItem :label="config.superpower_multiple.description" label-width="285">
                        <InputNumber ref="superpower_multiple" :max="5" :min="1" :step="0.5" style="width: 90px" v-model="config.superpower_multiple.value">
                        </InputNumber>
                    </FormItem>
                    </Col>
                </Row>
            </Card>

            <Card class="hide">
                <span slot="title">{{ config.prorations.description }}</span>
                <Row>
                    <Col>
                        <FormItem label="平台占比:">
                            <Input ref="prorations_v0" type="number" :number="true" maxlength="2" style="width: 90px" v-model="config.prorations.value.v0">
                                <span slot="append">%</span>
                            </Input>
                        </FormItem>
                        <FormItem label="一级代理:">
                            <Input  ref="prorations_v1" type="number" :number="true" maxlength="2" style="width: 90px" v-model="config.prorations.value.v1">
                                <span slot="append">%</span>
                            </Input>
                        </FormItem>
                        <FormItem label="二级代理:">
                            <Input ref="prorations_v2" type="number" :number="true"  maxlength="2" style="width: 90px" v-model="config.prorations.value.v2">
                                <span slot="append">%</span>
                            </Input>
                        </FormItem>
                        <FormItem label="三级代理:">
                            <Input ref="prorations_v3" type="number" :number="true" maxlength="2" style="width: 90px" v-model="config.prorations.value.v3">
                                <span slot="append">%</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
            </Card>

            <Card class="charge-card">
                <span slot="title">{{ config.charge_moneys.description }}</span>
                <Row>
                    <Col>
                        <FormItem>
                            <Input ref="charge_moneys_1" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m1.money">
                                <span slot="prepend">充值</span>
                                <span slot="append">元</span>
                            </Input>
                            <Input ref="charge_score_1" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m1.score">
                                <span slot="prepend">赠送积分</span>
                                <span slot="append">个</span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Input  ref="charge_moneys_2" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m2.money">
                                <span slot="prepend">充值</span>
                                <span slot="append">元</span>
                            </Input>
                            <Input ref="charge_score_2" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m2.score">
                                <span slot="prepend">赠送积分</span>
                                <span slot="append">个</span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Input ref="charge_moneys_3" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m3.money">
                                <span slot="prepend">充值</span>
                                <span slot="append">元</span>
                            </Input>
                            <Input ref="charge_score_3" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m3.score">
                                <span slot="prepend">赠送积分</span>
                                <span slot="append">个</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <FormItem>
                            <Input ref="charge_moneys_4" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m4.money">
                                <span slot="prepend">充值</span>
                                <span slot="append">元</span>
                            </Input>

                            <Input ref="charge_score_4" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m4.score">
                                <span slot="prepend">赠送积分</span>
                                <span slot="append">个</span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Input ref="charge_moneys_5" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m5.money">
                                <span slot="prepend">充值</span>
                                <span slot="append">元</span>
                            </Input>

                            <Input ref="charge_score_5" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m5.score">
                                <span slot="prepend">赠送积分</span>
                                <span slot="append">个</span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Input ref="charge_moneys_6" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m6.money">
                                <span slot="prepend">充值</span>
                                <span slot="append">元</span>
                            </Input>
                            <Input ref="charge_score_6" type="number" :number="true" maxlength="5" v-model="config.charge_moneys.value.m6.score">
                                <span slot="prepend">赠送积分</span>
                                <span slot="append">个</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
            </Card>

            <Card class="sign-in-card">
                <span slot="title">{{ config.sign_in.description }}</span>
                <Row>
                    <Col>
                        <FormItem label="是否开启：">
                            <i-switch size="large" v-model="config.sign_in.value.status" true-value="true" false-value="false">
                                <span slot="open">开启</span>
                                <span slot="close">关闭</span>
                            </i-switch>
                        </FormItem>
                        <FormItem>
                            <Input ref="signInScore" type="number" :number="true" maxlength="5" v-model="config.sign_in.value.give_score_num">
                                <span slot="prepend">赠送积分</span>
                                <span slot="append">个</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
            </Card>

            <Card class="user-invite-card">
                <span slot="title">{{ config.user_invite.description }}</span>
                <Row>
                    <Col>
                        <FormItem label="是否开启：">
                            <i-switch size="large" v-model="config.user_invite.value.status" true-value="true" false-value="false">
                                <span slot="open">开启</span>
                                <span slot="close">关闭</span>
                            </i-switch>
                        </FormItem>
                        <FormItem>
                            <Input ref="user_invite_give_score_num" type="number" :number="true" maxlength="5" v-model="config.user_invite.value.give_score_num">
                                <span slot="prepend">赠送积分</span>
                                <span slot="append">个</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
            </Card>
            <Row style="margin-top: 20px;">
                <Col span="24" style="text-align: center;">
                    <Button id="saveBtn" type="success" icon="save" @click="handleSubmit">保存</Button>
                </Col>
            </Row>
        </Form>
    </div>
</template>

<script>
    import util from '@/libs/util';

    export default {
        data () {
            return {
                config: {
                    ladder_price: {
                        key: 'ladder_price',
                        value: {
                            one: {
                                min: 0,
                                max: 20,
                                price: 1
                            },
                            two: {
                                min: 21,
                                max: 40,
                                price: 2
                            },
                            three: {
                                min: 41,
                                max: 60,
                                price: 5
                            },
                            four: {
                                min: 61,
                                max: 999999,
                                price: 10
                            },
                        },
                        description: '设备定价策略'
                    },

                    ladder_score: {
                        key: 'ladder_score',
                        value: {
                            status: false,
                            one_money_to_score: 1,
                        },
                        description: '积分兑换比例 (1元 = ？积分)'
                    },

                    prorations: {
                        key: 'prorations',
                        value: {
                            v0: '',
                            v1: '',
                            v2: '',
                            v3: '',
                        },
                        description: '默认分红比例'
                    },

                    charge_moneys: {
                        key: 'charge_moneys',
                        value: {
                            m1: {
                                money: 0,
                                score: 0,
                            },
                            m2: {
                                money: 0,
                                score: 0,
                            },
                            m3: {
                                money: 0,
                                score: 0,
                            },
                            m4: {
                                money: 0,
                                score: 0,
                            },
                            m5: {
                                money: 0,
                                score: 0,
                            },
                            m6: {
                                money: 0,
                                score: 0,
                            },
                        },
                        description: '充值金额设置（赠送积分个数为0，则表示当前充值金额不赠送积分）'
                    },

                    sign_in: {
                        key: 'sign_in',
                        value: {
                            status: false,
                            give_score_num: 0
                        },
                        description: '用户签到功能（积分为0则不赠送）'
                    },

                    user_invite: {
                        key: 'user_invite',
                        value: {
                            status: false,
                            give_score_num: 0
                        },
                        description: '用户注册邀请功能（积分为0则不赠送）'
                    },

                    superpower_multiple: {
                        key: 'superpower_multiple',
                        value: 1,
                        description: '大功率充电增加费用倍数（结算价 = 原价*倍数）'
                    }
                }
            }
        },

        created () {
            this.getData();
        },

        methods: {
            handleSubmit() {
                if (this.validator()) {
                    this.save();
                }
            },

            save () {
                util.api().post('/admin/api/configs/system', {configs: this.config}).then((resp) => {
                    this.$Notice.success({ title: resp.data.message });
                }).catch((e) => {
                    util.handleApiException(e, this, '设置设备系统参数失败');
                });
            },

            getData () {
                util.api().get('/admin/api/configs/system').then((resp) => {
                    this.$Notice.info({ title: resp.data.message });
                    if (resp.data.data.hasOwnProperty('ladder_price')) {
                        this.config.ladder_price.value = resp.data.data.ladder_price;
                    }

                    if (resp.data.data.hasOwnProperty('prorations')) {
                        this.config.prorations.value = resp.data.data.prorations;
                    }

                    if (resp.data.data.hasOwnProperty('superpower_multiple')) {
                        this.config.superpower_multiple.value = resp.data.data.superpower_multiple;
                    }

                    if (resp.data.data.hasOwnProperty('charge_moneys')) {
                        this.config.charge_moneys.value = resp.data.data.charge_moneys;
                    }

                    if (resp.data.data.hasOwnProperty('sign_in')) {
                        resp.data.data.sign_in.status = resp.data.data.sign_in.status.toString();
                        this.config.sign_in.value = resp.data.data.sign_in;
                    }

                    if (resp.data.data.hasOwnProperty('ladder_score')) {
                        resp.data.data.ladder_score.status = resp.data.data.ladder_score.status.toString();
                        this.config.ladder_score.value = resp.data.data.ladder_score;
                    }

                    if (resp.data.data.hasOwnProperty('user_invite')) {
                        resp.data.data.user_invite.status = resp.data.data.user_invite.status.toString();
                        this.config.user_invite.value = resp.data.data.user_invite;
                    }
                }).catch((e) => {
                    util.handleApiException(e, this, '获取设备系统参数失败');
                });
            },

            validator () {
                if (!this.validatePriceRange()) {
                    return false;
                } else if (typeof(this.config.ladder_score.value.one_money_to_score) !== 'number' || this.config.ladder_score.value.one_money_to_score < 0) {
                    this.$refs.ladder_score.focus();
                    this.$Notice.error({ title: '积分兑换数量必须大于0'});
                    return false;
                } else if (typeof(this.config.prorations.value.v0) !== 'number' || this.config.prorations.value.v0 <= 0) {
                    this.$refs.prorations_v0.focus();
                    this.$Notice.error({ title: '平台占比必须大于0%'});
                    return false;
                } else if (typeof(this.config.prorations.value.v1) !== 'number' || this.config.prorations.value.v1 <= 0) {
                    this.$refs.prorations_v1.focus();
                    this.$Notice.error({ title: '1级占比必须大于0%'});
                    return false;
                } else if (typeof(this.config.prorations.value.v2) !== 'number' || this.config.prorations.value.v2 <= 0) {
                    this.$refs.prorations_v2.focus();
                    this.$Notice.error({ title: '2级占比必须大于0%'});
                    return false;
                } else if (typeof(this.config.prorations.value.v3) !== 'number' || this.config.prorations.value.v3 <= 0) {
                    this.$refs.prorations_v3.focus();
                    this.$Notice.error({ title: '3级占比必须大于0%'});
                    return false;
                } else if (this.config.prorations.value.v0 + this.config.prorations.value.v1 + this.config.prorations.value.v2 + this.config.prorations.value.v3 !== 100) {
                    this.$refs.prorations_v3.focus();
                    this.$Notice.error({ title: '分红比例之和必须等于100%'});
                    return false;
                } else if (this.config.superpower_multiple.value < 1) {
                    this.$refs.superpower_multiple.focus();
                    this.$Notice.error({ title: '大功率充电增加费用倍数必须大于等于1'});
                    return false;
                }  else if (this.config.sign_in.value.give_score_num < 0) {
                    this.$refs.signInScore.focus();
                    this.$Notice.error({ title: '签到赠送积分数量必须大于等于0'});
                    return false;
                }  else if (this.config.user_invite.value.give_score_num < 0) {
                    this.$refs.user_invite_give_score_num.focus();
                    this.$Notice.error({ title: '邀请注册积分数量必须大于等于0'});
                    return false;
                } else {
                    for (let i in this.config.charge_moneys.value) {
                        if (this.config.charge_moneys.value[i].money <= 0 && !Math.isInteger(this.config.charge_moneys.value[i].money)) {
                            this.$refs.charge_moneys_1.focus();
                            this.$Notice.error({ title: '充值金额必须大于0元，金额必须是整数'});
                            return false;
                        }

                        if (this.config.charge_moneys.value[i].score < 0 && !Math.isInteger(this.config.charge_moneys.value[i].score)) {
                            this.$refs.charge_moneys_1.focus();
                            this.$Notice.error({ title: '赠送积分数量必须是大于等于0的整数'});
                            return false;
                        }
                    }
                }

                return true;
            },

            validatePriceRange() {
                const ladder_price = this.config.ladder_price.value;
                console.log(ladder_price);
                if (ladder_price.one.min != 0) {
                    this.$Notice.error({ title: '设备定价阶梯必须从0分钟开始计算'});
                    return false;
                } else if (ladder_price.one.min >= ladder_price.one.max) {
                    this.$Notice.error({ title: '1级定价阶梯时间范围填写错误，开始时间必须小于结束时间'});
                    return false;
                } else if (ladder_price.two.min != ladder_price.one.max) {
                    this.$Notice.error({ title: '2级定价阶梯必须从1级定价结束时间开始'});
                    return false;
                } else if (ladder_price.two.min >= ladder_price.two.max) {
                    this.$Notice.error({ title: '2级定价阶梯时间范围填写错误，开始时间必须小于结束时间'});
                    return false;
                } else if (ladder_price.three.min != ladder_price.two.max) {
                    this.$Notice.error({ title: '3级定价阶梯必须从2级定价结束时间开始'});
                    return false;
                } else if (ladder_price.three.min >= ladder_price.three.max) {
                    this.$Notice.error({ title: '3级定价阶梯时间范围填写错误，开始时间必须小于结束时间'});
                    return false;
                } else if (ladder_price.four.min != ladder_price.three.max) {
                    this.$Notice.error({ title: '4级定价阶梯必须从3级定价结束时间开始'});
                    return false;
                }

                return true;
            }
        }
    }
</script>

<style lang="less">
    @import "./index.less";
</style>